<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>约拍平台 - 搜索结果</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f8f8f8;
            margin: 0;
            padding: 0;
            color: #333;
        }
        .search-input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border: none;
            border-radius: 8px;
            background-color: #f3f4f6;
            font-size: 14px;
        }
        .search-input:focus {
            outline: none;
            background-color: #e5e7eb;
        }
        .search-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
        }
        .filter-item {
            display: inline-block;
            padding: 6px 12px;
            background-color: white;
            border-radius: 16px;
            margin-right: 8px;
            font-size: 12px;
            white-space: nowrap;
            border: 1px solid #e5e7eb;
        }
        .filter-item.active {
            background-color: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }
        .photographer-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        .tag-item {
            display: inline-block;
            padding: 2px 8px;
            background-color: #f3f4f6;
            border-radius: 12px;
            margin-right: 4px;
            margin-bottom: 4px;
            font-size: 10px;
        }
        .sort-option {
            padding: 12px 16px;
            border-bottom: 1px solid #f3f4f6;
        }
        .sort-option:last-child {
            border-bottom: none;
        }
        .sort-option.active {
            color: #3b82f6;
        }
        .sort-option.active i {
            display: inline-block;
        }
    </style>
</head>
<body>
    <!-- 状态栏将通过JS加载 -->
    
    <div class="pt-7 pb-20">
        <!-- 顶部搜索栏 -->
        <div class="bg-white px-4 py-3 sticky top-0 z-10 shadow-sm">
            <div class="flex items-center">
                <a href="index.html" class="mr-3">
                    <i class="fas fa-arrow-left text-gray-800"></i>
                </a>
                <div class="relative flex-1">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" class="search-input" placeholder="搜索摄影师、风格或地点" value="日系写真">
                </div>
                <button class="ml-3 text-blue-500">搜索</button>
            </div>
        </div>
        
        <!-- 筛选条件 -->
        <div class="bg-white p-4 border-b border-gray-200">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-base font-medium">筛选</h2>
                <button class="text-blue-500 text-sm">重置</button>
            </div>
            
            <div class="mb-4">
                <div class="text-sm text-gray-600 mb-2">拍摄风格</div>
                <div class="overflow-x-auto whitespace-nowrap pb-2">
                    <div class="filter-item active">日系写真</div>
                    <div class="filter-item">韩系写真</div>
                    <div class="filter-item">古风写真</div>
                    <div class="filter-item">私房写真</div>
                    <div class="filter-item">婚纱照</div>
                    <div class="filter-item">儿童摄影</div>
                    <div class="filter-item">商业摄影</div>
                </div>
            </div>
            
            <div class="mb-4">
                <div class="text-sm text-gray-600 mb-2">地区</div>
                <div class="overflow-x-auto whitespace-nowrap pb-2">
                    <div class="filter-item active">全部</div>
                    <div class="filter-item">上海</div>
                    <div class="filter-item">北京</div>
                    <div class="filter-item">广州</div>
                    <div class="filter-item">深圳</div>
                    <div class="filter-item">杭州</div>
                    <div class="filter-item">成都</div>
                </div>
            </div>
            
            <div>
                <div class="text-sm text-gray-600 mb-2">价格区间</div>
                <div class="overflow-x-auto whitespace-nowrap pb-2">
                    <div class="filter-item active">全部</div>
                    <div class="filter-item">¥0-500</div>
                    <div class="filter-item">¥500-1000</div>
                    <div class="filter-item">¥1000-2000</div>
                    <div class="filter-item">¥2000以上</div>
                </div>
            </div>
        </div>
        
        <!-- 排序选项 -->
        <div class="bg-white p-2 border-b border-gray-200 flex justify-between">
            <button class="flex-1 text-center py-1 text-sm" id="sortBtn">
                <span>综合排序</span>
                <i class="fas fa-chevron-down ml-1 text-xs"></i>
            </button>
            <div class="w-px bg-gray-200"></div>
            <button class="flex-1 text-center py-1 text-sm">
                <span>筛选</span>
                <i class="fas fa-filter ml-1 text-xs"></i>
            </button>
        </div>
        
        <!-- 排序弹出层 -->
        <div class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden" id="sortModal">
            <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-lg">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-center font-medium">排序方式</h3>
                </div>
                <div class="sort-option active">
                    综合排序
                    <i class="fas fa-check float-right text-blue-500"></i>
                </div>
                <div class="sort-option">
                    评分最高
                    <i class="fas fa-check float-right text-blue-500 hidden"></i>
                </div>
                <div class="sort-option">
                    价格从低到高
                    <i class="fas fa-check float-right text-blue-500 hidden"></i>
                </div>
                <div class="sort-option">
                    价格从高到低
                    <i class="fas fa-check float-right text-blue-500 hidden"></i>
                </div>
                <div class="sort-option">
                    接单量最多
                    <i class="fas fa-check float-right text-blue-500 hidden"></i>
                </div>
                <div class="p-4">
                    <button class="w-full py-3 bg-blue-500 text-white rounded-lg font-medium" id="sortCloseBtn">确定</button>
                </div>
            </div>
        </div>
        
        <!-- 搜索结果 -->
        <div class="p-4">
            <div class="text-sm text-gray-600 mb-4">找到 28 位摄影师</div>
            
            <!-- 摄影师卡片 -->
            <div class="photographer-card mb-4">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1513379733131-47fc74b45fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="w-full h-40 object-cover">
                    <div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded-full">
                        <i class="fas fa-heart mr-1"></i> 128
                    </div>
                </div>
                <div class="p-3">
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-8 h-8 rounded-full object-cover mr-2">
                            <div>
                                <div class="font-medium">Sarah摄影师</div>
                                <div class="text-xs text-gray-500">上海市</div>
                            </div>
                        </div>
                        <div class="flex items-center text-yellow-500 text-xs">
                            <i class="fas fa-star mr-1"></i>
                            <span>4.9</span>
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap mt-2">
                        <div class="tag-item">日系写真</div>
                        <div class="tag-item">韩系写真</div>
                        <div class="tag-item">私人定制</div>
                    </div>
                    
                    <div class="mt-3 flex justify-between items-center">
                        <div class="text-red-500 font-medium">¥599起</div>
                        <a href="portfolio.html" class="text-xs text-blue-500">查看作品集 <i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>
            </div>
            
            <div class="photographer-card mb-4">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1515372039744-b8f02a3ae446?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="w-full h-40 object-cover">
                    <div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded-full">
                        <i class="fas fa-heart mr-1"></i> 95
                    </div>
                </div>
                <div class="p-3">
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center">
                            <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-8 h-8 rounded-full object-cover mr-2">
                            <div>
                                <div class="font-medium">Emma摄影师</div>
                                <div class="text-xs text-gray-500">上海市</div>
                            </div>
                        </div>
                        <div class="flex items-center text-yellow-500 text-xs">
                            <i class="fas fa-star mr-1"></i>
                            <span>4.8</span>
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap mt-2">
                        <div class="tag-item">日系写真</div>
                        <div class="tag-item">古风写真</div>
                        <div class="tag-item">外景拍摄</div>
                    </div>
                    
                    <div class="mt-3 flex justify-between items-center">
                        <div class="text-red-500 font-medium">¥699起</div>
                        <a href="portfolio.html" class="text-xs text-blue-500">查看作品集 <i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>
            </div>
            
            <div class="photographer-card mb-4">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1504276048855-f3d60e69632f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="w-full h-40 object-cover">
                    <div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded-full">
                        <i class="fas fa-heart mr-1"></i> 76
                    </div>
                </div>
                <div class="p-3">
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center">
                            <img src="https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="w-8 h-8 rounded-full object-cover mr-2">
                            <div>
                                <div class="font-medium">Michael摄影师</div>
                                <div class="text-xs text-gray-500">北京市</div>
                            </div>
                        </div>
                        <div class="flex items-center text-yellow-500 text-xs">
                            <i class="fas fa-star mr-1"></i>
                            <span>4.7</span>
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap mt-2">
                        <div class="tag-item">日系写真</div>
                        <div class="tag-item">私房写真</div>
                        <div class="tag-item">室内棚拍</div>
                    </div>
                    
                    <div class="mt-3 flex justify-between items-center">
                        <div class="text-red-500 font-medium">¥799起</div>
                        <a href="portfolio.html" class="text-xs text-blue-500">查看作品集 <i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>
            </div>
            
            <div class="photographer-card mb-4">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="w-full h-40 object-cover">
                    <div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded-full">
                        <i class="fas fa-heart mr-1"></i> 112
                    </div>
                </div>
                <div class="p-3">
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="w-8 h-8 rounded-full object-cover mr-2">
                            <div>
                                <div class="font-medium">Lisa摄影师</div>
                                <div class="text-xs text-gray-500">广州市</div>
                            </div>
                        </div>
                        <div class="flex items-center text-yellow-500 text-xs">
                            <i class="fas fa-star mr-1"></i>
                            <span>4.9</span>
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap mt-2">
                        <div class="tag-item">日系写真</div>
                        <div class="tag-item">韩系写真</div>
                        <div class="tag-item">婚纱照</div>
                    </div>
                    
                    <div class="mt-3 flex justify-between items-center">
                        <div class="text-red-500 font-medium">¥499起</div>
                        <a href="portfolio.html" class="text-xs text-blue-500">查看作品集 <i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>
            </div>
            
            <!-- 加载更多 -->
            <div class="text-center py-4">
                <button class="text-blue-500 text-sm">
                    加载更多 <i class="fas fa-spinner fa-spin ml-1"></i>
                </button>
            </div>
        </div>
    </div>
    
    <script>
        // 加载状态栏
        document.addEventListener('DOMContentLoaded', function() {
            // 创建iOS状态栏
            const statusBar = document.createElement('div');
            statusBar.className = 'bg-black text-white h-7 flex items-center justify-between px-4 text-xs fixed top-0 left-0 right-0 z-50';
            statusBar.innerHTML = `
                <div>
                    <span>9:41</span>
                </div>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            `;
            document.body.prepend(statusBar);
            
            // 筛选标签点击事件
            const filterItems = document.querySelectorAll('.filter-item');
            filterItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 如果是同一组中的筛选项，则切换选中状态
                    const parent = this.parentElement;
                    const siblings = parent.querySelectorAll('.filter-item');
                    siblings.forEach(sib => sib.classList.remove('active'));
                    this.classList.add('active');
                });
            });
            
            // 排序弹窗
            const sortBtn = document.getElementById('sortBtn');
            const sortModal = document.getElementById('sortModal');
            const sortCloseBtn = document.getElementById('sortCloseBtn');
            const sortOptions = document.querySelectorAll('.sort-option');
            
            sortBtn.addEventListener('click', function() {
                sortModal.classList.remove('hidden');
            });
            
            sortCloseBtn.addEventListener('click', function() {
                sortModal.classList.add('hidden');
            });
            
            sortOptions.forEach(option => {
                option.addEventListener('click', function() {
                    sortOptions.forEach(opt => {
                        opt.classList.remove('active');
                        opt.querySelector('i').classList.add('hidden');
                    });
                    this.classList.add('active');
                    this.querySelector('i').classList.remove('hidden');
                    
                    // 更新排序按钮文本
                    const sortText = this.textContent.trim().split('\n')[0];
                    sortBtn.querySelector('span').textContent = sortText;
                });
            });
            
            // 点击遮罩关闭排序弹窗
            sortModal.addEventListener('click', function(e) {
                if (e.target === this) {
                    this.classList.add('hidden');
                }
            });
        });
    </script>
</body>
</html> 